<template>
	<view class="container margin-lr">
		<use-navbar title="个人资料"></use-navbar>
		
		<view class="dflex-c pos-r margin-bottom margin-top">
			<view class="portrait-box">
				<image class="border-radius-c" :src="member.member_headimg || '/static/images/user/default.png'">
				</image>
			</view>
			<view class="margin-left-sm">
				<view>
					<text class="username">{{ member.member_name || appabbr || '薇云购' }}</text>
				</view>
				<view v-if="member.slogan"><text class="fs-xxs">{{ member.slogan }}</text></view>
				<view v-else-if="member.member_city"><text class="fs-xxs">{{ member.member_city }}</text></view>
			</view>
		</view>
		
		<view class="border-radius">
			<use-list-title title="手机号" iconfont=" " :tip="member.member_mobile"></use-list-title>
			<use-list-title :title="passwordName" iconfont=" " tip="已设置"></use-list-title>
			<!-- #ifdef APP -->
			<use-list-title title="实名认证" iconfont=" " @goto="toRealname" tip="未认证"></use-list-title>
			<!-- #endif -->
		</view>
		
		<view class="margin-top margin-left-sm fwb">账号绑定</view>
		<view class="border-radius margin-top-sm">
			<!-- #ifndef MP-ALIPAY -->
			<use-list-title title="微信" iconfont=" " tip="已设置"></use-list-title>
			<!-- #endif -->
			<!-- #ifdef APP -->
			<use-list-title title="指纹" iconfont=" " tip="未设置"></use-list-title>
			<!-- #endif -->
			<!-- #ifdef APP || MP-ALIPAY -->
			<use-list-title title="支付宝" iconfont=" " tip="未设置"></use-list-title>
			<!-- #endif -->
			<!-- #ifdef APP -->
			<use-list-title v-if="isiOS" title="Apple" iconfont=" " tip="已设置"></use-list-title>
			<!-- #endif -->
		</view>
		
		<view class="margin-top margin-left-sm fwb">其它</view>
		<view class="border-radius margin-top-sm">
			<use-list-title title="账号注销" iconfont=" " tip="数据无法恢复"></use-list-title>
		</view>
		
		<view class="padding"></view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		computed: {
			...mapState(['islogin', 'member']),
			appabbr() {
				return this.$config.appabbr;
			},
			passwordName() {
				return this.appabbr + '密码';
			}
		},
		data() {
			return {
				isiOS: false
			};
		},
		onLoad() {
			this.$api.get_env(res => {
				this.isiOS = res.os && res.os.name == 'ios';
			});
		},
		onShow() {
			if (!this.islogin) {
				this.$api.msg('账号未登录');
				return;
			}
		},
		methods:{
			toRealname() {
				
			}
		}
	}
</script>

<style lang='scss'>
	page {
		background: $page-color-base;
	}

	image {
		width: 130rpx;
		height: 130rpx;
	}

	.use-item {
		height: 100rpx;
		line-height: 100rpx;
		position: relative;
		background: #fff;
	}
</style>
